<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>


  <div id="app">
    <!-- 插值表达式  {{ 变量名 }} -->
    {{num}}
    <!-- {{ fn() }} -->
    {{num}}
    <br>
-----------------------------------------------
    <br>
    {{ num / 6 }}

    {{ num > 999 }}

    {{ obj.name }}

    {{ num  == 0 ? '是0' : '不是0' }}

    <!-- 优势 : 响应式 -->
  </div>

  <!-- ./js/vue.js -->
  <!-- <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script> -->
  <script src="./vue2.6.12.js">// ......不能打</script>

  <script>
    // 1. 控制那个html元素  , 在那个元素身上 加  #app
    // 2. 创建一个vue实例 , 才能用它的功能 new Vue()
    // var num = 666
    // box.onclick = function(){}

    var app = new Vue({
      el:'#app', // #qqq
      data:{
        // 页面上需要用到的数据, 全要定义在这里
        num:666,
        obj:{
          name:'jack'
        }
      },
      methods:{
        // 页面上需要触发执行的方法,都要写在这
        fn:function(){
          this.num++
          console.log('fn666')
          return "hahaha"
        }
      }
    })

    

  </script>
</body>
</html>